<script>
export default {
  data() {
    return {
      userList: [],
      total: 0,
      currentPage: 1,
      size: 5,
      multipleSelection: [],
      username: '',
      dialogFormVisible: false,
      form: {}
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    getUserList() {
      this.request.get('/user/findAll/' + `${this.currentPage}` + "/" + `${this.size}` + "?userName=" + `${this.username}`)
          .then(res => {
            this.total = res.count
            this.userList = res.userList
          })
    },
    clear() {
      this.username = ''
    },
    // 每页数
    handleSizeChange(val) {
      this.size = val
      this.currentPage = 1
      this.getUserList()
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getUserList()
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.form = {}
    },
    saveOrUpdate() {
      if (!this.form.id) {
        this.request.post('/user/save', this.form)
            .then(res => {
              if (res) {
                this.$message.success(res.message);
                this.dialogFormVisible = false
              }
            })
      } else {
        this.request.post('/user/update', this.form)
            .then(res => {
              if (res) {
                this.$message.success(res.message);
                this.dialogFormVisible = false
              }
            })
      }
      this.getUserList()


    },
    handleEdit(row) {
      this.form = row
      this.dialogFormVisible = true
    },
    open(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.delete('/user/delete/' + id)
            .then(res => {
              if (res) {
                this.$message.success(res.message);
                this.getUserList()
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(val)
    },
    deleteBatch() {
      let ids = this.multipleSelection.map(v => v.id)
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.post('/user/deleteBatch', ids)
            .then(res => {
              if (res) {
                this.$message.success(res.message);
                this.getUserList()
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      });
    },
    exportUser() {
      window.open('http://localhost:8099/api/user/export')
    },
    // downloadTemplate() {
    //   this.request.get('/user/download', {
    //     responseType: 'blob' // Set response type as blob
    //   })
    //       .then(response => {
    //         const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });
    //         const link = document.createElement('a');
    //         link.href = URL.createObjectURL(blob);
    //         link.download = '用户模版.xlsx'; // Set your file name here
    //         link.click();
    //         URL.revokeObjectURL(link.href);
    //       })
    //       .catch(error => {
    //         console.error('Download failed:', error);
    //       });
    // },
    importUser() {
      this.$message.success("导入成功");
      this.getUserList()
    },
    showImagePreview(url) {
      // 在这里添加显示图片预览的逻辑，例如使用第三方图片预览库
      // 可以根据实际情况选择合适的图片预览方式
      // 这里以 element-ui 的 Dialog 组件为例来实现简单的图片预览
      this.$alert(`<img src="${url}" style="width:800px; height: 750px;"  alt=""/>`, '图片预览', {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
        closeOnClickModal: true,
        customClass: 'image-preview-dialog'
      });
    },
    handleAvatarSuccess(res){
      this.form.avatar=res.msg
    }
  }
}
</script>

<template>
  <div >


    <div style="padding: 10px 0">
      <el-input style="width: 250px" suffix-icon="el-icon-search" placeholder="请输入用户名"
                v-model="username"></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="getUserList()">搜索</el-button>
      <el-button type="danger" style="margin-left: 5px" @click="clear()">清空</el-button>
      <el-button type="primary" style="margin-left: 600px" @click="handleAdd">新增<i style="margin-left: 2px"
                                                                                     class="el-icon-circle-plus-outline"></i>
      </el-button>
      <el-button type="danger" style="margin-left: 10px" @click="deleteBatch">批量删除<i style="margin-left: 2px"
                                                                                         class="el-icon-remove-outline"></i>
      </el-button>
      <el-upload action="http://localhost:8099/api/user/import" :show-file-list="false" accept="xlsx"
                 :on-success="importUser" :limit="1" style="display: inline-block">
        <el-button type="success" style="margin-left: 10px">导入<i style="margin-left: 2px" class="el-icon-bottom"></i>
        </el-button>
      </el-upload>
      <!--    <el-button type="success" style="margin-left: 10px" @click="downloadTemplate">下载模版<i style="margin-left: 2px"-->
      <!--                                                                                             class="el-icon-download"></i></el-button>-->
      <el-button type="success" style="margin-left: 10px" @click="exportUser">导出<i style="margin-left: 2px"
                                                                                     class="el-icon-top"></i>
      </el-button>
    </div>

    <el-table :data="userList" border stripe @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column align="center" prop="userName" label="用户名" width="80">
      </el-table-column>
      <el-table-column align="center" prop="nickName" label="昵称" width="100">
      </el-table-column>
      <el-table-column align="center" prop="email" label="邮箱" width="180">
      </el-table-column>
      <el-table-column align="center" prop="phone" label="电话" width="120">
      </el-table-column>
      <el-table-column align="center" prop="gender" label="性别" width="80">
      </el-table-column>

      <el-table-column
          prop="avatar"
          header-align="center"
          align="center"
          label="头像"
          width="160"
      >
        <template slot-scope="scope">
          <div style="" @click="showImagePreview(scope.row.avatar)">
            <img :src="scope.row.avatar" width="80" height="80" style="cursor: pointer"/>
          </div>
        </template>
      </el-table-column>

      <el-table-column  align="center" prop="address" label="地址" width="140">
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间" width="160">
      </el-table-column>
      <el-table-column align="center" prop="updateTime" label="更新时间" width="160">
      </el-table-column>

      <el-table-column label="操作" width="250" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEdit(scope.row)">编辑<i style="margin-left: 2px"
                                                                          class="el-icon-edit"></i></el-button>
          <el-button type="danger" @click="open(scope.row.id)">删除<i style="margin-left: 2px"
                                                                      class="el-icon-remove-outline"></i></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px 0;margin-left: 460px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="size"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>

    <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
      <el-form label-width="70px" size="big">
        <el-form-item label="用户名">
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像" prop="questionHover">
          <div class="avatar-container">
            <el-upload
                action="http://localhost:8099/api/file/upload"
                class="avatar-uploader"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
            >
              <img style="width: 150px;height: 150px" v-if="form.avatar" :src="form.avatar" class="avatar"
                   alt="">
              <el-button v-else size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item label="地址">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<style scoped>

</style>